<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
     .main{
      position: relative;
      width: 700px;
      height: 500px;
      margin: 100px auto;
      font-size: 22px;
    }
    .box{
      padding: 20px;
      width: 600px;
      height: 400px;
      border: 10px solid black;
    }
    button{
      position: absolute;
      width: 130px;
      height: 40px;
      background-color: gray;
    }
    .btn button{
      display: none;
    }
    button:nth-child(1){
      bottom: 60px;
      left: 220px;
    }
    button:nth-child(2){
      bottom: 60px;
      right: 150px;
    }
    button:nth-child(3){
      bottom: 60px;
      left: 80px;
    }
    .box .title,button{
      font-size: 22px;
      font-weight: 700;
      text-align: center;
      /* display: none; */
    }
    .box button:nth-child(1){
      top: 80px;
      left: 180px;
      display: none;
    }
    .box button:nth-child(2){
      top: 80px;
      right: 220px;
      display: none;
    }
    .box button:nth-child(3){
      top: 160px;
      left: 180px;
      display: none;
    }
    .box button:nth-child(4){
      top: 160px;
      right: 220px;
      display: none;
    }
    .box button:nth-child(5){
      top: 240px;
      left: 260px;
      display: none;
    }
    .box button:nth-child(6){
      top: 320px;
      left: 260px;
      display: none;
    }
    .moshi{
      width: 200px;
      height: 100px;
    }
    .moshi button{
      font-size: 22px;
      font-weight: 700;
    }
    .moshi button:nth-child(1){
      top: 80px;
      left: 260px;
    }
    .moshi button:nth-child(2){
      top: 160px;
      left: 260px;
    }
    .xuanxiang button{
      font-size: 22px;
      font-weight: 700;
      width: 80px;
      height: 40px;
    }
    .xuanxiang button:nth-child(1){
      bottom: 60px;
      left: 100px;
      display: none;
    }
    .xuanxiang button:nth-child(2){
      bottom: 60px;
      left: 220px;
      display: none;
    }
    .xuanxiang button:nth-child(3){
      bottom: 60px;
      left: 340px;
      display: none;
    }
    .xuanxiang button:nth-child(4){
      bottom: 60px;
      left: 460px;
      display: none;
    }
    .chengji{
      display: none;
      position: absolute;
      bottom: 100px;
      right: 60px;
    }
    .chakan button{
      display: none;
      width: 200px;
      height: 100px;
      left: 50%;
      top: 50%;
      transform: translateX(-120px);
    }
    .textTime{
      display: none;
      position: absolute;
      left: 40px;
      bottom: 110px;
      width: 100px;
      height: 70px;
    }
    .min,.sec{
      color: green;
    }
  </style>
</head>
<body>
  <div class="main">
    <div class="btn">
      <button >下一题</button>
      <button >查看答案</button>
      <button >上一题</button>
    </div>
    <div class="box">
      <button>day01</button>
      <button>day02</button>
      <button>day03</button>
      <button>day04</button>
      <button>day05&06</button>
      <button>ALL</button>
      <div class="title">选择题库</div>
    </div>
    <div class="moshi">
      <button data-id="1">练习模式</button>
      <button data-id="2">考试模式</button>
    </div>
    <div class="chengji">
      一共20题<br>
      答对<span>0</span>题
    </div>
    <div class="xuanxiang">
      <button>A</button>
      <button>B</button>
      <button>C</button>
      <button>D</button>
      <div class="textTime">
        <p style="color: blueviolet;">考试时间</p>
        <p><span class="min">10</span>: <span class="sec">00</span></p>
      </div>
    </div>
    <div class="chakan">
      <button>查看成绩</button>
    </div>
  </div>
<script src="./选择题练习4.6.js"></script>
</body>
</html>